.index-container {
  padding: 24px;
  background: #f0f2f5;
  .sale-card {
    background: #fff;
    width: 100%;
    margin-top: 6px;

    .sale-container {
      margin: 24px 0;
      height: 350px;
      box-sizing: border-box;
      padding: 0 24px;
      .shop-title {
        height: 50px;
        font-size: 1rem;
      }
    }
  }
  .sale-list {
    margin: 25px 0;
  }

  .cardList-wrapper {
    .card-item {
      box-sizing: border-box;
      height: 150px;
      padding: 15px 15px 0;
      border-radius: 6px;
      cursor: pointer;
      margin-bottom: 25px;
      &.card-item-one {
        background: linear-gradient(to right, #5171fd, #c97afd);
      }
      &.card-item-two {
        background: linear-gradient(to right, #3dadf6, #737bfc);
      }
      &.card-item-three {
        background: linear-gradient(to right, #ea677c, #ef9b5f);
      }
      &.card-item-four {
        background: linear-gradient(to right, #42d79b, #a6e25f);
      }
      &:hover {
        box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
        transform: scale(1.03);
        transition: all 0.1s ease-out;
      }
      .card-title {
        color: #fff;
        font-size: 1rem;
      }
      .all-count {
        color: #fff;
        font-size: 1.9rem;
        font-weight: bold;
        margin-top: 12px;
        padding-left: 25px;
        .suffix {
          font-size: 0.75rem;
          margin-left: 5px;
        }
      }
      .card-info {
        color: #fff;
        font-size: 0.85rem;
        height: 46px;
        margin-top: 8px;
        .abs-bottom {
          position: absolute;
          bottom: 7px;
          left: 0;
        }
        .up {
          color: #1afa29;
        }
        .down {
          color: rgb(250, 30, 16);
        }
      }
    }
  }

  .sale-title {
    height: 55px;
    line-height: 55px;
    padding: 0 60px 0 25px;
    box-sizing: border-box;
    font-size: 1.1rem;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    .sale-time {
      height: 100%;
      .time-item {
        color: #757575;
        font-size: 1rem;
        width: 60px;
        height: 100%;
        display: inline-block;
        background: #fff;
        text-align: center;
        margin: 0 5px;
        &.activeTime {
          background: #1890ff;
          border-radius: 4px;
          box-sizing: border-box;
          color: #fff;
          box-shadow: -1px 5px 15px #abc3f2;
          &:hover {
            background: #1890ff;
          }
        }
        &:hover {
          background: rgba(0, 0, 0, 0.025);
          transition: all 0.3s, padding 0s;
        }
      }
    }
  }

  .shopRank-wrapper {
    width: 100%;
    height: calc(100% - 50px);
    overflow-y: auto;
    .shop-item {
      margin-bottom: 16px;
      font-size: 1rem;
      .rankIndex {
        width: 30px;
        height: 30px;
        text-align: center;
        vertical-align: middle;
      }
    }
  }
}
